import { memo, useState } from "react";
import { PageContainer } from "@ant-design/pro-components";
import { shallowEqual, useSelector } from "react-redux";
import { RootState } from "../../store";
import { orgType } from "../../store/org";
import { useGetOrganizationInfo_service } from "../../service/organization";
import {
  Button,
  Calendar,
  Card,
  Col,
  ConfigProvider,
  DatePicker,
  message,
  Result,
  Row,
} from "antd";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
import { useAutoCreateTimetable } from "../../service/timetable";
import locale from "antd/locale/zh_CN";
import "dayjs/locale/zh-cn";
import Timetable from "./cpms/timetable";
import { SendOutlined } from "@ant-design/icons";

const { RangePicker } = DatePicker;

const Major = memo(() => {
  const [date, setDate] = useState<string[]>();
  const [today, setToday] = useState(dayjs().format("YYYY-MM-DD"));
  const [createTimetableSuccess, setCreateTimetableSuccess] = useState(true);

  const { createTimetable, loading: createTimetableLoading } =
    useAutoCreateTimetable();
  const { org } = useSelector(
    (state: RootState) => ({
      org: state.orgReducer.currentOrg as orgType,
    }),
    shallowEqual
  );

  const { data: orgData, loading: orgLoading } = useGetOrganizationInfo_service(
    org?.id
  );
  const datePickerChange = (value: Dayjs[]) => {
    setDate(value.map((item) => item.format("YYYY-MM-DD")));
  };
  const setTimetable = () => {
    if (!org.name) {
      void message.error("请选择门店后再开始排课!");
      return;
    }
    if (!date) {
      void message.error("请选择日期再开始排课!");
      return;
    }
    void message.info("正在排课中请耐心等待！");
    setCreateTimetableSuccess(false);
    void createTimetable(date).then((res) => {
      if (res.code) {
        void message.success(res.message);
        setCreateTimetableSuccess(true);
      } else {
        void message.error("创建课程表失败");
      }
    });
  };
  return (
    <>
      <PageContainer
        title={org.name}
        loading={orgLoading}
        content={
          orgData?.address && (
            <>
              <span>地址：</span> <SendOutlined style={{ color: "#2cbf17" }} />{" "}
              {orgData?.address}
            </>
          )
        }
      >
        <Row gutter={20}>
          <Col flex="auto">
            <Card
              title={today + " 的课程表"}
              extra={
                <span>
                  <RangePicker
                    onChange={(value) => datePickerChange(value as Dayjs[])}
                  />
                  <Button
                    type="link"
                    onClick={setTimetable}
                    loading={createTimetableLoading}
                  >
                    开始排课
                  </Button>
                </span>
              }
            >
              {org.name ? (
                <Timetable
                  today={today}
                  createTimetableSuccess={createTimetableSuccess}
                />
              ) : (
                <Result status="404" subTitle="请选择门店" />
              )}
            </Card>
          </Col>
          <Col flex="300px">
            <ConfigProvider locale={locale}>
              <Calendar
                fullscreen={false}
                onChange={(d) => setToday(d.format("YYYY-MM-DD"))}
              />
            </ConfigProvider>
          </Col>
        </Row>
      </PageContainer>
    </>
  );
});

export default Major;
